<template>
  <view class="demo-submit-bar">
    <!-- 页面内容 -->
    <view class="demo-content">
      <view class="demo-section">
        <view class="demo-title">基础用法</view>
        <fu-submit-bar
          :icons="[
            { name: 'shop', text: '店铺', color: '#666' },
            { name: 'cart', text: '购物车', badge: '5' }
          ]"
          button-text="立即购买"
          @submit="onSubmit"
          @icon-click="onIconClick"
        />
      </view>
      
      <view class="demo-section">
        <view class="demo-title">固定底部</view>
        <fu-submit-bar
          :icons="[
            { name: 'shop', text: '店铺', color: '#666' },
            { name: 'cart', text: '购物车', badge: '5' },
            { name: 'like', text: '收藏', color: '#666' }
          ]"
          button-text="立即购买"
          secondary-text="加入购物车"
          :show-secondary-button="true"
          fixed
          @submit="onSubmit"
          @icon-click="onIconClick"
        />
      </view>
      
      <view class="demo-section">
        <view class="demo-title">禁用状态</view>
        <fu-submit-bar
          :icons="[
            { name: 'shop', text: '店铺' },
            { name: 'cart', text: '购物车', badge: '5' }
          ]"
          button-text="立即购买"
          disabled
          @submit="onSubmit"
          @icon-click="onIconClick"
        />
      </view>
      
      <view class="demo-section">
        <view class="demo-title">高级用法</view>
        <fu-submit-bar
          :icons="[
            { name: 'shop', text: '店铺' },
            { name: 'cart', text: '购物车', badge: '5' },
          ]"
          button-text="立即购买"
          secondary-text="加入购物车"
          :show-secondary-button="true"
          @submit="onSubmit"
          @secondary-click="onSecondaryClick"
          @icon-click="onIconClick"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      uni.showToast({
        title: '点击立即购买',
        icon: 'none'
      })
    },
    
    onSecondaryClick() {
      uni.showToast({
        title: '点击加入购物车',
        icon: 'none'
      })
    },
    
    onIconClick(icon) {
      uni.showToast({
        title: `点击${icon.text}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.demo-submit-bar {
  min-height: 100vh;
  padding-bottom: 200rpx;
  background-color: #f5f5f5;
  
  .demo-section {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
  }
  
  .demo-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
  }
}
</style> 